/*
import * as THREE from "three";
import {onMounted} from "vue";
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
import {DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader";

const width = window.innerWidth - 20, height = window.innerHeight - 30;

// init
const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setAnimationLoop( animation );

onMounted(() => {
    console.log(renderer)
    document.getElementById('container').appendChild(renderer.domElement)
})

let mixer;
function loader() {
    const loader = new GLTFLoader()
        .setPath('./model/')
        .setDRACOLoader(new DRACOLoader().setDecoderPath('js/gltf/'))

    loader.load('bbb.glb', function (gltf) {
        gltf.scene.scale.set(80, 80, 80)
        // 动画播放器
        mixer = new THREE.AnimationMixer(gltf.scene)
        mixer.clipAction(gltf.animations[0]).play()
        scene.add(gltf.scene)
    })
}

// animation

function animate() {
    requestAnimationFrame(animate)
    if (mixer) mixer.update(clock.getDelta())
    control.update() // required if damping enabled
    renderer.render(scene, camera)
}

function animation( time ) {

    mesh.rotation.x = time / 2000;
    mesh.rotation.y = time / 1000;

    renderer.render( scene, camera );

}

*/


/*
<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import {RoomEnvironment} from 'three/examples/jsm/environments/RoomEnvironment';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import png from './png/1.png'

let clock, scene, camera, renderer, control, mixer;
function init() {
  clock = new THREE.Clock()
  // 场景，相机
  scene = new THREE.Scene()

  // 添加场景背景
  const loader11 = new THREE.TextureLoader();
  const bgTexture = loader11.load(png);
  scene.background = bgTexture;
  // scene.background = new THREE.Color(0xbbbbbb)

  // 透视相机（）
  camera = new THREE.PerspectiveCamera(
      50,
      window.innerWidth / window.innerHeight,
      1,
      2000
  )
  camera.position.set(-230, 100, 300)
  scene.add(camera);

  // 渲染器
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  // 地表格
  // const grid = new THREE.GridHelper(500, 100, 0xffffff, 0xffffff)
  // grid.material.opacity = 0.5
  // grid.material.depthWrite = false
  // grid.material.transparent = true
  // scene.add(grid)

  // 材质
  // const environment = new RoomEnvironment()
  // const pmremGenerator = new THREE.PMREMGenerator(renderer)
  // scene.environment = pmremGenerator.fromScene(environment).texture

  //   灯光-环境光
  scene.add(new THREE.AmbientLight(0x444444))

  // 灯光-平行光
  const light = new THREE.DirectionalLight(0xffffff)
  light.position.set(0, 20, 20)

  light.castShadow = true
  light.shadow.camera.top = 100
  light.shadow.camera.bottom = -100
  light.shadow.camera.left = -100
  light.shadow.camera.right = 100

  //告诉平行光需要开启阴影投射
  light.castShadow = true
  scene.add(light)

  // 鼠标控制器
  control = new OrbitControls(camera, renderer.domElement)

  // 坐标轴
  // const axesHelper = new THREE.AxesHelper(114)
  // scene.add(axesHelper)
  loader()
  animate()
}
// glb模型加载
function loader() {
  const loader = new GLTFLoader()
  loader.load('./glb/03.glb', function (gltf) {
    console.log('gltf',gltf)
    // gltf.scene.scale.set(80, 80, 80)
    // // 动画播放器
    mixer = new THREE.AnimationMixer(gltf.scene)
    if(gltf.animations && gltf.animations[0]){
      mixer.clipAction(gltf.animations[0]).play()
    }
    scene.add(gltf.scene)
  })
}
function animate() {
  requestAnimationFrame(animate)
  if (mixer) mixer.update(clock.getDelta())
  control.update() // required if damping enabled
  renderer.render(scene, camera)
}

init()
animate()
</script>

<template>
  <div id="container"></div>
</template>
* */